<template>
    <main>
        <NavInstall></NavInstall>

        <section class="chrome-banner">
            <div class="container malus-chrome-hero"><img
                src="https://malus.s3cdn.net/uploads/chrome_download.png">
                <div class="chrome-banner-content"><h3>Malus Chrome 插件安装指南</h3><a href="/changelog/chrome"
                                                                                  class="chrome-changelog">
                    <div class="app-changelog">
                        <div class="changelog-time"><span>2021-1-19</span> <small>最新版本 V7.0.5</small></div>
                        <p class="changelog-type">修复</p> <span class="changelog-content">修复弹窗缓存 bug</span></div>
                </a></div>
            </div>
        </section>

        <section class="chrome-install container"><h3>第一步：安装扩展</h3>
            <span
                id="chrome-install" class="chrome-install-btn" event="Chrome Install">安装Malus</span>
            <img src="../assets/chrome_install.5d68e.jpg" alt="install chrome"></section>

        <section class="chrome-install chrome-active container"><h3>第二步：启用扩展</h3><a id="chrome-active"
                                                                                    class="chrome-install-btn">启用Malus</a>
            <img src="../assets/chrome_active.e9ba5.png" alt="install chrome"></section>

        <section class="chrome-review container"><h3>第三步：获得3天VIP</h3>
            <div class="chrome-review-content"><img src="../assets/chrome_review.c51c6.png" alt="install chrome">
                <div class="chrome-review-right"><p>希望我们的新老用户给我们点个赞支持我们做好回国加速这个事儿。现只要给我们好评的用户，我们都会送上 3 天的VIP会员。</p>
                    <span>*奖励领取方式：评价后发送【截图+帐号】至在线客服或者 hi@getmalus.com</span></div>
            </div>
            <a href="/r/chrome-reviews" target="_blank" class="chrome-install-btn chrome-review-btn">立即好评获得3天VIP</a></section>

        <user-comment></user-comment>
    </main>
</template>

<script>
import NavInstall from "@/components/NavInstall";
import UserComment from "@/components/UserComment";

export default {
    name: "Chrome",
    components: {UserComment, NavInstall}
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .chrome-banner {
        display: none!important;
    }
    .chrome-install {
        img {
            width: 90%!important;
        }
    }
    .chrome-review {
        .chrome-review-content {
            flex-direction: column;
            .chrome-review-right {
                padding: 25px!important;
                p {
                    color: #333!important;
                }
            }
        }
    }
}
main {
    .chrome-banner {
        display: block;
        background: #f9f9ff;
        height: 300px;

        .malus-chrome-hero {
            display: flex;
            align-items: center;

            img {
                margin: 40px 80px 0 0;
                width: 382px;
                height: 260px;
            }

            .chrome-banner-content {
                h3 {
                    font-size: 42px;
                    line-height: 1.5;
                    font-weight: 400;
                    position: relative;
                    margin-top: -12px;
                }

                a {
                    display: block;
                    margin-top: 24px;
                    width: 590px;
                    position: relative;

                    .app-changelog {
                        display: flex;
                        align-items: center;
                        overflow: hidden;
                        width: 100%;
                        height: 30px;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        .changelog-time {
                            span {
                                display: none;
                            }

                            small {
                                padding: 5px 12px 4px;
                                background: #f3f2ff;
                                color: #4d55e8;
                                border-radius: 20px;
                                font-size: 12px;
                                margin-right: 12px;
                            }
                        }

                        p {
                            display: none;
                        }

                        .changelog-content {
                            margin: 0 !important;
                            padding-top: 1px;
                            font-size: 12px !important;
                            color: #7b7b7b;
                            padding-left: 12px;
                            padding-right: 12px;
                            border-right: none;
                        }
                    }

                    .app-changelog:after {
                        position: absolute;
                        content: "......";
                        right: -30px;
                        top: 0;
                        color: #7b7b7b;
                    }
                }
            }
        }
    }

    .chrome-install {
        margin-top: 128px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid #e8e7f8;
        border-radius: 6px;

        h3 {
            position: relative;
            font-size: 32px;
            color: #000;
            font-weight: 500;
            text-align: center;
            margin-top: -20px;
            margin-bottom: 42px;
            background: #fff;
            padding: 0 40px;
        }

        h3::before {
            background: url(../assets/number1.cbd09.svg);
            content: "";
            display: block;
            width: 52px;
            height: 88px;
            position: absolute;
            left: -34px;
            top: -32px;
        }

        span {
            margin: 28px 0 35px;
            font-size: 16px;
            font-weight: 500;
            line-height: 16px;
            padding: 16px 66px;
            display: inline-block;
            background: #63b302;
            color: #fff;
            border-radius: 50px;
            box-shadow: 0 10px 20px rgb(99 179 2 / 15%);
        }

        img {
            width: 590px;
            margin-bottom: 46px;
        }
    }

    .chrome-active {
        h3::before {
            background: url(../assets/number2.c62b8.svg);
        }
    }

    .chrome-review {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 88px;
        background: #f8f8ff;
        border-radius: 6px;
        box-shadow: inset 0 4px 0 #4d55e8;
        h3 {
            position: relative;
            display: inline-block;
            text-align: center;
            font-size: 28px;
            padding: 48px 0 40px;
        }
        h3:before {
            background: url(../assets/chrome_star.539f9.svg);
            background-size: contain;
            left: -154px;
            content: "";
            display: block;
            width: 125px;
            height: 21px;
            position: absolute;
            top: 54px;
        }
        h3:after {
            background: url(../assets/chrome_star.539f9.svg);
            background-size: contain;
            right: -154px;
            content: "";
            display: block;
            width: 125px;
            height: 21px;
            position: absolute;
            top: 54px;
        }
        .chrome-review-content {
            display: flex;
            align-items: center;

            img {
                width: 280px;
                margin: 0 48px 0 42px;
            }
            .chrome-review-right {
                padding-right: 52px;
                font-size: 14px;
                line-height: 1.5;
                color: #333;
                span {
                    display: inline-block;
                    padding-top: 12px;
                    font-size: 12px;
                    color: #7b7b7b;
                }
            }
        }
        a {
            background: #ff960c;
            margin: 54px 0;
            box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
            font-size: 16px;
            font-weight: 500;
            line-height: 16px;
            padding: 16px 66px;
            display: inline-block;
            color: #fff;
            border-radius: 50px;
        }
    }
}
</style>
